<template>
  <view class="lunar-date-picker">
  lunarDateRangeIndex:{{lunarDateRangeIndex}}
​
  <picker-view
    indicator-style="height: 44px"
    style="width: 100%; height: 528rpx"
    value="{{lunarDateRangeIndex}}"
    bindchange="multiPickerChangeHandler"
  >
    <picker-view-column>
      <view class="picker-column-item" wx:for="{{lunarDateRange[0]}}" wx:key="value">
        {{item.text}}
      </view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-column-item" wx:for="{{lunarDateRange[1]}}" wx:key="value">
        {{item.text}}
      </view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-column-item" wx:for="{{lunarDateRange[2]}}" wx:key="value">
        {{item.text}}
      </view>
    </picker-view-column>
  </picker-view>
</view>
</template>
<script lang='ts'  setup >
import { ref } from 'vue'
 const lunarDate = require('../../utils/lunarDate.js');
 const {calendar} = require('../../utils/calendar.js');

 const properties = {   
    lunarYear: Number,//农历年
    lunarMonth: Number,//农历月
    lunarDay: Number,//农历日
    isLeapMonth: Boolean,//闰月标记
    solarDate: String,//公历日期
    solarDateRange: Object//公历年份起始
  }

 const lunarDateRange = ref([]) //农历日期范围
 const lunarDateRangeIndex = ref([])//选中农历索引

 const _init =  () => {
    const { lunarYear,  lunarMonth, lunarDay, isLeapMonth, solarDate, solarDateRange } = properties;

      _initLunarDateRange(solarDate, solarDateRange, lunarYear, lunarMonth, lunarDay, isLeapMonth);
  }
  const _initLunarDateRange = function (solarDate, solarDateRange, lunarYear, lunarMonth, lunarDay, isLeapMonth) {
      const lunarDateRange = lunarDate.initLunarDateRangeHandler(solarDateRange);
      const lunarDateRangeIndex = this._setDefaultLunarDateRangeIndex(lunarDateRange, solarDate, solarDateRange, lunarYear, lunarMonth, lunarDay, isLeapMonth);
      this._updateLunarDateRange(lunarDateRange, lunarDateRangeIndex);
      if (lunarYear && lunarMonth && lunarDay) {
          console.log("农历日期不为空，准备显示农历日期");
          this._showLunarDateHandler(lunarDateRange, lunarDateRangeIndex, false);
      } else if (solarDate) {
          console.log("公历日期不为空，准备显示转化后的农历日期");
          this._showLunarDateHandler(lunarDateRange, lunarDateRangeIndex, true);
      }
      console.log("农历日期：", lunarDateRange);
  }

  const _setDefaultLunarDateRangeIndex: function (lunarDateRange, solarDate, solarDateRange, lunarYear, lunarMonth, lunarDay, isLeapMonth) {
      let lunarDateRangeIndex;
      if (lunarYear && lunarMonth && lunarDay) {
          console.log("外部传入农历日期：", lunarYear, lunarMonth, lunarDay, isLeapMonth);
          lunarDateRangeIndex = [lunarYear - solarDateRange.start, this._getLunarMonthIndex(lunarYear, lunarMonth, isLeapMonth), lunarDay - 1];
      } else {
          console.log("外部传入公历日期：", solarDate);
          let date = solarDate != null ? new Date(solarDate.replace(/-/g,"/")) : new Date();
          // let date = new Date(solarDate.replace(/-/g,"/"));
          const year = date.getFullYear();
          const month = date.getMonth() + 1;
          const day = date.getDate();
          const targetLunarDate = calendar.solar2lunar(year, month, day);
          console.log("转化后的农历日期：", JSON.stringify(targetLunarDate));
          const {lYear, lMonth, lDay, isLeap} = targetLunarDate;

          lunarYear = lYear;
          lunarMonth = lMonth;
          isLeapMonth = isLeap;
          lunarDateRangeIndex = [lYear - solarDateRange.start, this._getLunarMonthIndex(lunarYear, lunarMonth, isLeapMonth), lDay - 1];
      }
      lunarDateRange[1] = lunarDate.resetLunarMonthRangeHandler(lunarYear);
      lunarDateRange[2] = lunarDate.resetLunarDayRangeHandler(lunarYear, lunarMonth, isLeapMonth);

      console.log("默认的农历日期选中索引：", lunarDateRangeIndex);
      return lunarDateRangeIndex;
  },


</script>
<style lang='scss' scoped >
 .lunar-date-picker {
    background-color: #fff;
  }
  
  .picker-column-item {
    line-height: 88rpx;
    text-align: center;
  }
</style>